import React, { useState, useEffect } from 'react';
import './yundong.css';
import axios from 'axios';
import { LeftOutline, RightOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
function yundong() {
    const navigate = useNavigate();
    const [fu, setFu] = useState([]);
    const [shen, setShen] = useState([]);
    const [yang, setYang] = useState([]);
    const [zou, setZou] = useState([])
    const getFu = () => {
        axios.get('http://127.0.0.1:3000/qjx_fus')
            .then(res => {
                setFu(res.data.data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    };
    const getShen = () => {
        axios.get('http://127.0.0.1:3000/qjx_shens')
            .then(res => {
                setShen(res.data.data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    };
    const getYang = () => {
        axios.get('http://127.0.0.1:3000/qjx_yangs')
            .then(res => {
                setYang(res.data.data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    };
    const getZou = () => {
        axios.get('http://127.0.0.1:3000/qjx_zous')
            .then(res => {
                setZou(res.data.data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    };
    useEffect(() => {
        getFu();
        getShen();
        getYang();
        getZou();

    }, []);
    return (
        <div>
            <div className='y_one'>
                <p style={{
                    marginTop: '5px'
                }} onClick={() => navigate('/home/mind')}><LeftOutline fontSize={24} /></p>
                <h2>运动目标</h2>
            </div>
            <div className='y_yun'>
                <div className='y_twos' onClick={() => navigate('/y_zou')}>
                    <div>
                        <svg t="1740015274884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2617" width="200" height="200"><path d="M477.866667 145.066667a76.8 76.8 0 1 1 153.582933 0A76.8 76.8 0 0 1 477.866667 145.066667z m135.304533 367.2064l-17.408-47.479467-17.442133 106.1888 97.5872 151.005867c0.512 1.0752 1.4848 2.133333 1.9968 3.208533l93.5936 171.8272c12.936533 24.0128 5.461333 54.954667-16.930134 68.846933a42.7008 42.7008 0 0 1-23.3984 6.929067c-15.940267 0-31.863467-9.079467-40.328533-25.088l-92.603733-170.222933-93.098667-144.0768-50.2784 161.6896a64.512 64.512 0 0 1-7.970133 15.479466l-107.025067 143.530667c-9.472 12.288-22.903467 18.688-36.864 18.688a44.270933 44.270933 0 0 1-29.354667-11.2128c-20.411733-17.066667-23.3984-48.554667-7.4752-70.434133l102.058667-136.6016 64.221867-206.506667c0.512 0 0.512-0.546133 0.512-0.546133l24.8832-151.022934-57.258667 44.305067-24.388267 157.405867c-2.491733 17.6128-16.930133 29.883733-32.853333 29.883733-1.9968 0-3.4816 0-5.4784-0.512-17.92-3.208533-30.378667-21.367467-27.392-41.096533l26.897067-171.844267a36.864 36.864 0 0 1 13.431466-22.9376l132.932267-104.584533c15.9232-22.4256 43.3152-35.2256 71.185067-29.883734 20.411733 3.7376 37.341867 16.5376 48.298666 33.621334 1.9968 2.6624 3.976533 5.853867 4.983467 9.0624l0.494933 0.529066c1.9968 3.754667 3.4816 7.4752 4.471467 11.741867l57.7536 161.160533 95.5904 51.234134c16.4352 8.533333 23.3984 30.4128 14.933333 48.0256-5.973333 12.270933-17.408 19.729067-29.866666 19.729066-4.983467 0-9.949867-1.058133-14.933334-3.720533l-107.042133-57.105067a35.618133 35.618133 0 0 1-16.4352-19.217066z" fill="#1296db" p-id="2618"></path></svg>
                    </div>
                    <div className='f_pp'>
                        {zou.length > 0 && (
                            <span>{zou[zou.length - 1].stepValue}步</span>
                        )}
                        <RightOutline fontSize={18} />
                    </div>
                </div>
                <div className='y_two' onClick={() => navigate('/y_shen')}>
                    <div>
                        <svg t="1740015365337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3808" width="200" height="200"><path d="M477.866667 247.466667c59.733333 8.533333 119.466667-29.866667 132.266666-89.6S584.533333 38.4 520.533333 25.6s-119.466667 25.6-132.266666 85.333333c-4.266667 21.333333 0 42.666667 4.266666 59.733334 12.8 38.4 46.933333 68.266667 85.333334 76.8z m55.466666 196.266666h298.666667c25.6 0 46.933333-21.333333 46.933333-46.933333 0-29.866667-21.333333-51.2-46.933333-51.2h-285.866667c-8.533333-38.4-38.4-68.266667-76.8-76.8l-12.8-4.266667c-55.466667-12.8-115.2 21.333333-128 76.8L256 477.866667l-85.333333 153.6c-38.4 46.933333-34.133333 119.466667 17.066666 157.866666 4.266667 4.266667 12.8 8.533333 21.333334 12.8 17.066667 17.066667 42.666667 21.333333 64 17.066667l217.6-51.2-98.133334 136.533333c-17.066667 25.6-12.8 64 12.8 81.066667 25.6 17.066667 64 12.8 81.066667-12.8l192-264.533333c4.266667-8.533333 8.533333-21.333333 8.533333-34.133334V640c-8.533333-42.666667-51.2-64-93.866666-55.466667l-123.733334 29.866667" fill="#1296db" p-id="3809"></path></svg>
                    </div>
                    <div className='f_ppp'>
                        {shen.length > 0 && (
                            <span>{shen[shen.length - 1].stepValue}个</span>
                        )}
                        <RightOutline fontSize={18} />
                    </div>
                </div>
                <div className='y_two' onClick={() => navigate('/y_yang')}>
                    <div>
                        <svg t="1740015426493" class="icon" viewBox="0 0 2029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4900" width="200" height="200"><path d="M1999.32099514 839.95269298l-296.982607-297.85134a92.954439 92.954439 0 0 0-130.06175199-20.22906998 88.11435501 88.11435501 0 0 0-10.92121605 9.30785401l-236.54360595 236.79181499a31.52260001 31.52260001 0 0 1-44.05717699 0 154.510383 154.510383 0 0 0-106.73006402-42.692025l-461.17315801-11.41763498-101.76587399-101.76587401 158.854048-158.85404799a93.078544 93.078544 0 0 0-38.47246501-163.94234202l-239.0257-64.286248a248.20945001 248.20945001 0 1 0-53.36503199 178.33848999l92.33391501 24.82094501-106.73006301 106.730064a155.13090601 155.13090601 0 0 0-69.74685603 259.627084S570.6274001 1023.875895 710.74163513 1023.875895l535.63599302-19.608546c60.68721101 0 91.46518202-3.72314202 105.116702-11.54174a93.326753 93.326753 0 0 0 31.52259997-19.856756l2.85440901-2.854408 241.135481-240.390853 238.65338602 238.65338599a95.684743 95.684743 0 0 0 132.29563698 4.71598002 93.078544 93.078544 0 0 0 1.36515201-133.040265z" p-id="4901" fill="#1296db"></path></svg>
                    </div>
                    <div className='f_ppp'>
                        {yang.length > 0 && (
                            <span>{yang[yang.length - 1].stepValue}个</span>
                        )}
                        <RightOutline fontSize={18} />
                    </div>
                </div>
                <div className='y_two' onClick={() => navigate('/y_fu')}>
                    <div>
                        <svg t="1740015483361" class="icon" viewBox="0 0 1804 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6026" width="200" height="200"><path d="M1235.480381 436.028952a2384.018286 2384.018286 0 0 0-342.503619 117.516191 2373.924571 2373.924571 0 0 1-648.533333 245.955047c-59.684571 11.702857-102.302476-6.241524-113.127619-54.467047-10.873905-48.274286 16.237714-84.065524 65.828571-101.961143A2261.138286 2261.138286 0 0 0 472.259048 536.380952a2647.186286 2647.186286 0 0 0 238.640762-155.648 583.68 583.68 0 0 1 129.414095-77.824c120.100571-41.252571 243.321905-77.824 365.714285-109.714285 122.392381-31.939048 194.462476 11.654095 192.121905 150.186666v383.707429c0 47.445333 0 102.692571-68.169143 104.252952-68.169143 1.560381-71.289905-45.104762-77.482666-94.110476-0.78019-97.328762-8.484571-191.488-17.066667-301.251048z" fill="#1296db" p-id="6027"></path><path d="M125.318095 828.952381l14.872381 78.994286h1437.500953l-105.228191-157.988572c56.56381-21.308952 82.407619 0 100.498286 37.936762 18.041905 37.936762 40.813714 78.994286 60.464762 116.931048 19.602286 37.936762 10.971429 62.415238-39.253334 61.635047H122.88c-84.796952 0-91.038476-10.24-51.785143-84.553142l30.622476-53.73562 23.552 0.780191zM1776.298667 214.25981a179.44381 179.44381 0 0 1-175.055238 163.547428 167.009524 167.009524 0 0 1-157.013334-164.327619c0-44.665905 17.895619-87.381333 49.737143-118.491429A163.498667 163.498667 0 0 1 1612.946286 48.274286a161.206857 161.206857 0 0 1 116.540952 48.225524 163.352381 163.352381 0 0 1 46.811429 117.711238z" fill="#1296db" p-id="6028"></path><path d="M1105.67619 804.425143H560.859429v-17.505524a1343.24419 1343.24419 0 0 1 175.152761-29.403429c104.252952-4.778667 210.16381 0 315.196953 0 32.670476-5.607619 58.368 0 54.467047 46.908953z m82.505143-0.780191a240.493714 240.493714 0 0 1-35.791238-69.241904 1056.426667 1056.426667 0 0 1-15.603809-159.061334c0-11.946667 14.043429-23.893333 21.065143-36.571428 9.752381 8.192 17.895619 18.139429 24.088381 29.403428 6.631619 17.846857 10.581333 36.571429 11.702857 55.686096 6.192762 55.686095 10.093714 112.152381 15.555047 167.838476l-21.016381 11.946666zM128.926476 621.470476c50.858667-71.192381 139.459048-102.790095 222.598095-79.579428l-222.598095 79.579428z" fill="#1296db" p-id="6029"></path></svg>
                    </div>
                    <div className='f_ppp'>
                        {fu.length > 0 && (
                            <span>{fu[fu.length - 1].stepValue}个</span>
                        )}
                        <RightOutline fontSize={18} />
                    </div>
                </div>
            </div>
        </div>
    )

}
export default yundong;